<template>
	<!-- 主要容器 -->
	<view class="address-selector" v-if="visible">
		<!-- 头部导航 -->
		<view class="selector-header">
			<text class="header-title">选择收货地址</text>
			<text class="header-close" @click="handleClose">×</text>
		</view>

		<!-- 地址列表 -->
		<scroll-view scroll-y class="address-list" v-if="addressList.length">
			<!-- 地址卡片 -->
			<view v-for="(item, index) in addressList" :key="item.id" class="address-card" :class="{ selected: selectedAddressId === item.id }" @click="selectAddress(item)">
				<view class="card-top">
					<text class="receiver">{{ item.receiverName }}</text>
					<text class="phone">{{ item.phoneNumber }}</text>
					<view v-if="item.isDefault === '2'" class="default-tag">默认</view>
				</view>

				<view class="address-info">
					{{ item.address }}
				</view>

				<view class="card-bottom">
					<view class="edit-icon" @click.stop="editAddress(item.id)">
						<image class="icon" src="/static/images/icon_edit.png" />
					</view>
					<view class="delete-icon" @click.stop="deleteAddress(item.id)">
						<image class="icon" src="/static/images/icon_del_1.png" />
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 空地址状态 -->
		<view class="empty-address" v-else>
			<image class="empty-img" src="/static/images/address_null.png" />
			<text class="empty-text">还没有添加收货地址哦~</text>
		</view>

		<!-- 底部操作栏 -->
		<view class="address-footer">
			<button class="add-address-btn" @click="addAddress">
				<image src="/static/images/icon_add.png" class="btn-icon" />
				新增收货地址
			</button>
		</view>

		<!-- 删除确认弹窗 -->
		<u-modal
			v-model="showDeleteConfirm"
			:show-cancel-button="true"
			confirm-text="删除"
			confirm-color="#FF2C3C"
			:show-title="false"
			@confirm="confirmDelete"
			@cancel="cancelDelete"
		>
			<view class="delete-confirm">
				<image class="warning-icon" src="/static/images/icon_warning.png" />
				<view class="confirm-text">确认删除该地址吗？</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import user from '@/api/user.js';
export default {
	name: 'x-address',
	props: {
		// 是否显示组件
		visible: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			addressList: [],
			showDeleteConfirm: false,
			currentId: 0,
			selectedAddressId: null,
			isWeixin: true
		};
	},

	watch: {
		visible(newVal) {
			if (newVal) {
				this.getAppaddList();
			}
		}
	},

	methods: {
		// 关闭地址选择器
		handleClose() {
			this.$emit('update:visible', false);
		},

		// 选择地址
		selectAddress(item) {
			this.selectedAddressId = item.id;
			this.$emit('select', item);
			this.handleClose();
		},

		// 获取地址列表
		async getAppaddList() {
			try {
				const res = await user.getAppaddList();
				this.addressList = res.rows || [];
				// 自动选择默认地址
				const defaultAddress = this.addressList.find((item) => item.isDefault === '2');
				if (defaultAddress) {
					this.selectedAddressId = defaultAddress.id;
				}
			} catch (error) {
				console.error('获取地址失败:', error);
			}
		},

		// 添加新地址
		addAddress() {
			uni.navigateTo({
				url: '/pages/address_edit/address_edit'
			});
		},

		// 编辑地址
		editAddress(id) {
			uni.navigateTo({
				url: `/pages/address_edit/address_edit?id=${id}`
			});
		},

		// 删除地址
		deleteAddress(id) {
			this.currentId = id;
			this.showDeleteConfirm = true;
		},

		// 确认删除
		async confirmDelete() {
			try {
				await user.delAddress(this.currentId);
				this.showDeleteConfirm = false;
				uni.showToast({
					title: '地址删除成功',
					icon: 'success'
				});
				await this.getAppaddList();
			} catch (error) {
				console.error('删除地址失败:', error);
			}
		},

		// 取消删除
		cancelDelete() {
			this.showDeleteConfirm = false;
		},

		// 关闭选择器
		closeSelector() {
			this.$emit('update:visible', false);
		}
	}
};
</script>

<style lang="scss" scoped>
.address-selector {
	background-color: #fff;
	border-radius: 30rpx;
	position: fixed;
	z-index: 999;
	top: -25%;
	left: 15%;

	height: 50%;
	width: 70%;

	display: flex;
	flex-direction: column;

	transform: translateY(100%);
	transition: transform 0.3s ease;

	&.active {
		transform: translateY(0);
	}
}

.selector-header {
	position: relative;
	border-radius: 30rpx 30rpx 0 0;
	height: 90rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.header-close {
		position: absolute;
		right: 30rpx;
		font-size: 48rpx;
		color: #999;
	}
}

.address-list {
	flex: 1;
	padding: 0 5%;
	padding-top: 20rpx;
}

.address-card {
	background-color: #fff;
	width: 90%;
	border-radius: 12rpx;
	padding: 28rpx 24rpx;
	margin-bottom: 24rpx;
	position: relative;

	&.selected {
		border: 2rpx solid #f05a39;
	}

	.card-top {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		.receiver {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-right: 20rpx;
		}

		.phone {
			font-size: 28rpx;
			color: #666;
		}

		.default-tag {
			position: absolute;
			top: 28rpx;
			right: 24rpx;
			padding: 4rpx 10rpx;
			background-color: #fff9f0;
			border: 1rpx solid #f05a39;
			color: #f05a39;
			font-size: 24rpx;
			border-radius: 6rpx;
		}
	}

	.address-info {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 24rpx;
		line-height: 1.6;
	}

	.card-bottom {
		display: flex;
		justify-content: flex-end;
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;

		.edit-icon,
		.delete-icon {
			width: 48rpx;
			height: 48rpx;
			margin-left: 30rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.empty-address {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 120rpx;

	.empty-img {
		width: 300rpx;
		height: 300rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-top: 30rpx;
	}
}

.address-footer {
	background-color: #fff;
	padding: 24rpx 30rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 0 0 30rpx 30rpx;

	.add-address-btn {
		background: linear-gradient(135deg, #f05a39, #ff7e56);
		color: #fff;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 15rpx;
		}
	}
}

.delete-confirm {
	padding: 40rpx;
	text-align: center;

	.warning-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}

	.confirm-text {
		font-size: 32rpx;
		color: #333;
	}
}
</style>
